<template>
  <div>
    <div class="container1">
      <div class="top-box-flex" style="margin:1rem 0;margin-top:0">
        <div class='topbox top-box-block' style="background-color:#0079FE;">
          <div style="font-size:15px;padding-top:14px"><b>{{topObj.disciplineCount || 0}}</b></div>
          <div>未完成</div>
        </div>
        <div class='topbox top-box-block' style="background-color:#FFA018;">
          <div style="font-size:15px;padding-top:14px"><b>{{topObj.onJobCount || 0}}</b></div>
          <div>执行中</div>
        </div>
        <div class='topbox top-box-block' style="background-color:#FF6418;">
          <div style="font-size:15px;padding-top:14px"><b>{{topObj.leaveJobCount || 0}}</b></div>
          <div>待审核</div>
        </div>
        <div class='topbox top-box-block' style="background-color:#44AA55;">
          <div style="font-size:15px;padding-top:14px"><b>{{topObj.onDormCount || 0}}</b></div>
          <div>已完成</div>
        </div>
      </div>
      <div class="container2">
        <div style="width:48%;height:750px">
          <div class="common-body-shadow">
            <div class="common-title-flex">
              <div class="common-title-div"></div>
              <div class="common-title-text">企业云端巡查任务</div>
              <div class="common-title-new">最新更新时间：20202020</div>
              <div style="width:100%">
                <div style="margin-left:20px;font-size:14px;color:#aaa">最新数字<b style="font-size:20px;margin:0 5px;color: #000;">8888</b>个任务</div>
              </div>
              <div id="main2" style="width:100%;height:240px;"></div>
            </div>
          </div>
          <div style="display:flex">
            <div class="common-body-shadow3">
              <div style="display:block;text-align:center;padding:15px 0;color:#fff;background-color:#50A3FF;border-radius: 5px 5px 0 0;">
                <div style="font-size:18px"><b>12888</b></div>
                <div style="font-size:14px">云端巡查</div>
                <div style="font-size:18px"><b>满意度调查</b></div>
              </div>
              <div style="display:flex;justify-content:space-around;margin-top:15px">
                <el-image style="width: 30px; height: 30px" :src='url'></el-image>
                <b style="line-height:30px;display: block;">满意</b>
                <b style="line-height:30px;color:#FE6B38">88888</b>
              </div>
              <div style="display:flex;justify-content:space-around;margin-top:15px">
                <el-image style="width: 30px; height: 30px" :src='url2'></el-image>
                <b style="line-height:30px;display: block;">一般</b>
                <b style="line-height:30px;color:#3F9AFE">88888</b>
              </div>
              <div style="display:flex;justify-content:space-around;margin-top:15px">
                <el-image style="width: 30px; height: 30px" :src='url3'></el-image>
                <b style="line-height:30px;display: block;">不满意</b>
                <b style="line-height:30px;color:#808080">8888</b>
              </div>
            </div>
            <div class="common-body-shadow3" style="margin-left:20px">
              <div class="common-title-flex">
                <div class="common-title-div"></div>
                <div class="common-title-text">企业云端巡查任务</div>
                <el-button type="text" class="common-title-new1">本周</el-button>
              </div>
              <!-- <div class="common-title-new">最新更新时间：20202020</div> -->
              <div id="main" style="width:100%;height:100%;"></div>
            </div>
          </div>
        </div>
        <div style="width:48%;height:750px">
          <div class="common-body-shadow">
            <div class="common-title-flex">
              <div class="common-title-div"></div>
              <div class="common-title-text">异常行为展示</div>
              <el-button type="text" class="common-title-new1">本周</el-button>
              <el-button type="text" style="margin-right:10px">本月</el-button>
              <div id="main3" style="width:100vw;height:240px;"></div>
            </div>
          </div>
          <div class="container3">
            <div style="display:flex;width:100%">
              <div class="common-body-shadow3" style="height:135px">
                <div class="common-title-flex">
                  <div class="common-title-div"></div>
                  <div class="common-title-text">重点部位巡查</div>
                  <el-button type="text" class="common-title-new1">最近七天</el-button>
                  <div style="display:block;text-align:center;padding:15px 0;width: 100%;">
                    <div style="font-size:22px;color: #1D86FE;"><b>12888</b></div>
                    <div style="font-size:12px">云端巡查</div>
                  </div>
                </div>
              </div>
              <div class="common-body-shadow3" style="height:135px;margin-left:20px;">
                <div class="common-title-flex">
                  <div class="common-title-div"></div>
                  <div class="common-title-text">反诈宣传巡查</div>
                  <el-button type="text" class="common-title-new1">最近七天</el-button>
                  <div style="display:block;text-align:center;padding:15px 0;width: 100%;">
                    <div style="font-size:22px;color: #FFB247;"><b>12888</b></div>
                    <div style="font-size:12px">反诈宣传</div>
                  </div>
                </div>
              </div>
            </div>
            <div style="display:flex;width:100%">
              <div class="common-body-shadow3" style="height:135px">
                <div class="common-title-flex">
                  <div class="common-title-div"></div>
                  <div class="common-title-text">单位信息登记</div>
                  <el-button type="text" class="common-title-new1">最近七天</el-button>
                  <div style="display:block;text-align:center;padding:15px 0;width: 100%;">
                    <div style="font-size:22px;color: #FF6E27;"><b>12888</b></div>
                    <div style="font-size:12px">单位信息</div>
                  </div>
                </div>
              </div>
              <div class="common-body-shadow3" style="margin-left:20px;height:135px">
                <div class="common-title-flex">
                  <div class="common-title-div"></div>
                  <div class="common-title-text">异常行为登记</div>
                  <el-button type="text" class="common-title-new1">最近七天</el-button>
                  <div style="display:block;text-align:center;padding:15px 0;width: 100%;">
                    <div style="font-size:22px;color: #868686;"><b>12888</b></div>
                    <div style="font-size:12px">异常行为</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- <el-image style="width: 100%; height: 100%" :src="url" fit="fill"></el-image> -->
    <!-- <el-image style="width: 30%; height: 20%" class="text_image" :src="texturl" fit="fill"></el-image> -->
  </div>
</template>

<script>
import Schart from "vue-schart";
import echarts from "echarts";
import bus from "../common/bus";
import mixin from "@/mixin/mixin.js";
import ElementResizeDetectorMaker from "element-resize-detector";
export default {
  name: "dashboard",
  mixins: [mixin],
  data() {
    return {
      divwidth: "",
      divheight: "",
      topObj: "",
      tableData: [],
      failList: [],
      pageSizes: [10, 15, 50, 100],
      pagesize: 10,
      total: 10,
      currentPage: 1,
      selectList: [],
      url: require("../../assets/img/企业统计/qytj_icon1.png"),
      url2: require("../../assets/img/企业统计/qytj_icon2.png"),
      url3: require("../../assets/img/企业统计/qytj_icon3.png"),
      // texturl:require('../../assets/img/minjing1.png'),
      valuename: "",
      loading: false,
      name: localStorage.getItem("ms_username"),
      // Echarts: null,
      searchObj: {
        applyTime: "",
      },
      value2: "",
    };
  },
  components: {
    Schart,
  },
  computed: {
    role() {
      return this.name === "admin" ? "超级管理员" : "普通用户";
    },
  },
  created() {
    // let userinfo = JSON.parse(localStorage.getItem("userinfo"));
    // let typeCode = userinfo.typeCode;
    // if (typeCode == "police") {
    //   this.url = require("../../assets/img/公安.gif");
    // } else if (typeCode == "business") {
    //   this.url = require("../../assets/img/公司.gif");
    // } else if (typeCode == "labour") {
    //   this.url = require("../../assets/img/劳务公司.gif");
    // } else {
    //   this.url = require("../../assets/img/人社局.gif");
    // }
    // this.uploadHeader.Authorization = this.requestToken;
    // this.initDataList();
  },
  activated() {
    // this.handleListener();
  },
  deactivated() {
    // window.removeEventListener("resize", this.renderChart);
    bus.$off("collapse", this.handleBus);
  },
  methods: {
    //查询
    // initDataList() {
    //   let self = this;
    //   let params = {
    //     beginTime: self.searchObj.applyTime ? self.searchObj.applyTime[0] : "",
    //     endTime: self.searchObj.applyTime ? self.searchObj.applyTime[1] : "",
    //   };
    //   self.showLoading();
    //   self
    //     .$axios({
    //       method: "post",
    //       url: "/index/queryHeadMateSpace",
    //       headers: {
    //         Authorization: self.requestToken,
    //       },
    //       data: params,
    //       params: params,
    //     })
    //     .then((res) => {
    //       self.hideLoading();
    //       console.log("res---->:", res);
    //       if (res.data.code == "20000") {
    //         this.topObj = res.data.data;
    //       } else {
    //         this.tableData = [];
    //         this.total = 0;
    //         this.$message({
    //           message: res.data.message,
    //           type: "error",
    //         });
    //       }
    //     })
    //     .catch((err) => {
    //       this.hideLoading();
    //       this.$message({ message: err, type: "error" });
    //     });
    // },
    reset() {},
    testImage() {
      this.loading = true;
      let test = this.Echarts.getDataURL({
        pixelRatio: 1,
        backgroundColor: "#fff",
      });
      this.valuename = this.dataURLtoFile(test, "testpng");

      let params = {
        image1: this.valuename,
      };
      this.$nextTick(() => {
        this.axiosMethod(params);
      });
    },
    axiosMethod(params) {
      console.log("-------", this.valuename);
      var formData = new FormData();
      formData.append("image1", this.valuename);
      this.$axios({
        headers: { "Content-Type": "multipart/form-data" },
        url: "/word/test",
        method: "post",
        data: formData,
        // params:params
      })
        .then((res) => {
          this.loading = false;
          console.log("res-----", res);
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    dataURLtoFile(dataurl, filename) {
      //将base64转换为文件
      var arr = dataurl.split(","),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new File([u8arr], filename, { type: mime });
    },
    gonganecharts() {
      this.Echarts = echarts.init(document.getElementById("main2"));
      this.Echarts.setOption(this.option3);
      console.log();
    },
    changeDate() {
      const now = new Date().getTime();
      this.data.forEach((item, index) => {
        const date = new Date(now - (6 - index) * 86400000);
        item.name = `${date.getFullYear()}/${
          date.getMonth() + 1
        }/${date.getDate()}`;
      });
    },
    handleListener() {
      bus.$on("collapse", this.handleBus);
      // 调用renderChart方法对图表进行重新渲染
      // window.addEventListener("resize", this.renderChart);
    },
    // handleBus(msg) {
    //   setTimeout(() => {
    //     this.renderChart();
    //   }, 300);
    // },
    // renderChart() {
    //   this.$refs.bar.renderChart();
    //   this.$refs.line.renderChart();
    // },
    // 云端巡查统计状图
    gonganecharts() {
      var myChart = echarts.init(document.getElementById("main2"));
      var option = {
        xAxis: {
          type: "category",

          data: [
            "Mon",
            "Tue",
            "Wed",
            "Thu",
            "Fri",
            "Sat",
            "Sun",
            "Mon",
            "Tue",
            "Wed",
            "Thu",
            "Fri",
          ],
          splitLine: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            //x轴刻度线
            show: false,
          },
        },
        yAxis: {
          type: "value",
          splitLine: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            //x轴刻度线
            show: false,
          },
        },
        grid: {
          top: "10%",
          left: "5%",
          right: "3%",
          bottom: "25%",
          containLabel: true,
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130, 200, 150, 80, 70, 110],
            type: "bar",
            showBackground: true,
            barWidth: 15,
            itemStyle: {
              normal: {
                //这里是重点
                color: "#50A3FF",
                barBorderRadius: 15,
                label: {
                  show: true, //开启显示
                  position: "top", //在上方显示
                  textStyle: {
                    //数值样式
                    color: "#888",
                    fontSize: 10,
                  },
                },
              },
            },
          },
        ],
      };
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    // 云端巡查统饼状图
    gonganecharts2() {
      let myChart = echarts.init(document.getElementById("main"));
      let option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          bottom: "18%",
          left: "center",
          textStyle: {
            //图例文字的样式
            fontSize: 8,
          },
        },
        series: [
          {
            // name: "访问来源",
            type: "pie",
            radius: ["30%", "45%"],
            center: ["50%", "30%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
              normal: {
                // color: 各异,
                borderWidth: 1,
                label: {
                  show: true, //数据标签显示
                  position: "outer",
                  //数据标签的字体配置，与其他组件相同
                  textStyle: {
                    fontSize: 10, //字号
                    fontWeight: "normal", //粗细【normal\bold\bolder\lighter】
                    fontFamily: "Microsoft YaHei", //字体【 'serif'\'monospace'\'Arial'\'Courier New'\'Microsoft YaHei'】
                    color: "", //颜色各异
                  },
                  formatter: "{d}%", //a:系列名，就是你上面写的name半径模型，b：数据名，就是rose1，c：数据值，d百分比
                },
                labelLine: {
                  show: true, //数据标签引导线
                  length: 5,
                  lineStyle: {
                    width: 1,
                    type: "solid",
                  },
                },
              },
              emphasis: {
                //选中的样式
                borderColor: "rgba(0,0,0,0)",
                borderWidth: 1,
                label: {
                  show: true, //选中时不显示数据标签
                },
                labelLine: {
                  show: true, //选中时不显示数据标签引导线
                  // length: 50,
                  lineStyle: {
                    width: 1,
                    type: "solid",
                  },
                },
              },
            },
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "15",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              {
                value: 1048,
                name: "搜索引擎邮件营销",
                itemStyle: { color: "#FFA018" },
              },
              {
                value: 580,
                name: "邮件营销邮件营销",
                itemStyle: { color: "#FF6418" },
              },
              {
                value: 484,
                name: "联盟广告邮件营销",
                itemStyle: { color: "#FFD81A" },
              },
              {
                value: 735,
                name: "直接访问邮件营销",
                itemStyle: { color: "#20A456" },
              },
              {
                value: 300,
                name: "视频广告邮件营销",
                itemStyle: { color: "#0079FE" },
              },
            ],
          },
        ],
      };
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    //异常行为展示图
    showEcharts() {
      let myChart = echarts.init(document.getElementById("main3"));
      let option = {
        tooltip: {
          trigger: "axis",
        },
        grid: {
          top: "12%",
          left: "5%",
          right: "5%",
          bottom: "12%",
          containLabel: true,
        },

        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
          splitLine: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            //x轴刻度线
            show: false,
          },
        },
        yAxis: {
          type: "value",
          splitLine: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            //y轴刻度线
            show: false,
          },
        },
        series: [
          {
            name: "入职",
            type: "line",
            stack: "总量",
            data: [220, 102, 191, 234, 290, 130, 310],
            symbolSize: 8,
            itemStyle: {
              normal: {
                color: "#7DBBFF",
                lineStyle: {
                  color: "#7DBBFF",
                },
              },
            },
            areaStyle: {
              color: "#D2E7FF",
            },
          },
        ],
      };
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    rowStyle({ row, rowIndex }) {
      let style1 = {};
      let style2 = {};
      if (rowIndex % 2 == 0) {
        style1.background = "#ffffff";
        return style1;
      } else {
        style2.background = "#f5f5f5";
        return style2;
      }
    },
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      return "background-color:#f5f5f5;color:#626262;";
    },
    // 取消点击
    handleClose() {
      this.cancel();
    },
    // 点击分页当前页多少数据
    handleSizeChange(val) {
      this.pagesize = val;
      this.initDataList();
    },
    // 点击分页页数
    handleCurrentChange(val) {
      this.currentPage = val;
      this.initDataList();
    },
    //  重置
    reset() {
      this.searchObj = {
        name: "",
        company: "",
        phone: "",
      };
      this.initDataList();
    },
  },
  mounted() {
    this.$nextTick(function () {
      // this.showEcharts();
      this.gonganecharts();
      this.gonganecharts2();
      this.showEcharts();
    });
  },
  watch: {
    // this.leftopen(val,old){
    //   setTimeout(re=>{
    //     let myChart = echarts.init(document.getElementById(main));
    //     // myChart.resize() //echarts得重绘方法
    //   },300)
    // }
  },
};
</script>
<style scoped>
.text_image {
  position: absolute;
  z-index: 10;
  top: 10%;
  right: 2%;
}
.first-page {
  text-shadow: 0 0 10px #462424;
  color: white;
  font-size: 20px;
  font-weight: bold;
  /* position: relative;
  width:100%;
  height:100%;
  background-image: url(../../assets/img/laowugong.jpeg);
  background-size: 100%;
  background-repeat:no-repeat;
  background-size: cover; */
}
.el-row {
  margin-bottom: 20px;
}

.grid-content {
  display: flex;
  align-items: center;
  height: 100px;
}

.grid-cont-right {
  flex: 1;
  text-align: center;
  font-size: 14px;
  color: #999;
}

.grid-num {
  font-size: 30px;
  font-weight: bold;
}

.grid-con-icon {
  font-size: 50px;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  color: #fff;
}
.common-title-div {
  width: 3px;
  height: 16px;
  background-color: #368af7;
  margin-top: 8px;
  margin-left: 10px;
}
.common-title-flex {
  width: 100%;
  display: flex;
  /* margin-top: 10px; */
  padding-top: 10px;
  flex-wrap: wrap;
}
.common-title-text {
  /* width: 120px;  ,/ , las lc */
  padding-left: 4px;
  font-size: 14px;
  line-height: 32px;
  padding-right: 20px;
  font-weight: bold;
}
.common-title-new {
  line-height: 35px;
  font-size: 12px;
  flex: 1;
  text-align: right;
  padding-right: 10px;
}
.common-title-new1 {
  font-size: 12px;
  flex: 1;
  text-align: right;
  padding-right: 10px;
}
.common-body-shadow {
  width: 100%;
  height: 280px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0px 0px 5px #c5c5c5;
}
.common-body-shadow2 {
  width: 48%;
  height: 610px;
  background-color: #fff;
  box-shadow: 0px 0px 5px #c5c5c5;
  border-radius: 5px;
}
.common-body-shadow3 {
  margin-top: 10px;
  width: 48%;
  height: 280px;
  background-color: #fff;
  box-shadow: 0px 0px 5px #c5c5c5;
  border-radius: 5px;
}
.grid-con-1 .grid-con-icon {
  background: rgb(45, 140, 240);
}

.grid-con-1 .grid-num {
  color: rgb(45, 140, 240);
}

.grid-con-2 .grid-con-icon {
  background: rgb(100, 213, 114);
}

.grid-con-2 .grid-num {
  color: rgb(45, 140, 240);
}

.grid-con-3 .grid-con-icon {
  background: rgb(242, 94, 67);
}

.grid-con-3 .grid-num {
  color: rgb(242, 94, 67);
}

.user-info {
  display: flex;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 2px solid #ccc;
  margin-bottom: 20px;
}

.user-avator {
  width: 120px;
  height: 120px;
  border-radius: 50%;
}

.user-info-cont {
  padding-left: 50px;
  flex: 1;
  font-size: 14px;
  color: #999;
}

.user-info-cont div:first-child {
  font-size: 30px;
  color: #222;
}

.user-info-list {
  font-size: 14px;
  color: #999;
  line-height: 25px;
}

.user-info-list span {
  margin-left: 70px;
}

.mgb20 {
  margin-bottom: 20px;
}

.todo-item {
  font-size: 14px;
}

.todo-item-del {
  text-decoration: line-through;
  color: #999;
}

.schart {
  width: 100%;
  height: 15rem;
}
.topbox {
  width: 24%;
  height: 70px;
  background-color: aqua;
  border-radius: 3px;
}
.top-box-flex {
  width: 100%;
  display: flex;
  justify-content: space-around;
  font-size: 12px;
  color: #fff;
  flex-wrap: wrap;
  margin-top: 10px;
}
.top-box-block {
  display: block;
  text-align: center;
}
.container2 {
  display: flex;
  justify-content: space-around;
}
.container3 {
  height: 280px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.echartsStyle {
  width: 95%;
  height: 300px;
}
.container {
  padding: 0;
}
</style>
